<template>
  <div ref="container" />
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import type { IFunnelSeriesData } from '@/types';

type EChartsOption = echarts.EChartsOption;

const props = defineProps({
  category: { type: Array as PropType<string[]>, default: () => [] },
  seriesData: { type: Array as PropType<IFunnelSeriesData[]> },
});

let myChart: echarts.ECharts | undefined;
const container = ref<HTMLDivElement>();
const init = () => {
  myChart = echarts.init(container.value);
};

const setOption = () => {
  const seriesItem: EChartsOption['series'] = {
    type: 'funnel',
    left: '10%',
    top: 40,
    bottom: 40,
    width: '80%',
    min: 0,
    max: 100,
    minSize: '20%',
    maxSize: '70%',
    sort: 'descending',
    gap: 2,
    data: props.seriesData || [],
  };
  const option: EChartsOption = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c}%',
    },
    toolbox: {
      feature: { saveAsImage: {} },
    },
    series: [
      {
        name: '流量漏斗-inner',
        ...seriesItem,
        label: {
          show: true,
          position: 'inside',
          formatter: '{c}',
        },
      },
      {
        name: '流量漏斗-outer',
        ...seriesItem,
        label: {
          show: true,
          formatter: '{b}\n\n{c}%',
        },
        labelLine: {
          show: true,
          length: 40,
          lineStyle: { width: 1, type: 'dashed', opacity: 0.5 },
        },
      },
    ],
  };

  myChart?.setOption(option);
};

watch([() => props.category, () => props.seriesData], () => {
  setOption();
});

onMounted(() => {
  init();
  setOption();
});
</script>

<style scoped lang="less"></style>
